<template>
  <button @click="toClick" :class="[
    'bc-button', sizeType, type?'bc-button--'+type:'',
    {'is-disabled': disabled}]">
   <!-- 图标按钮 -->
    <bc-icon v-if="icon&&!right"
      :name='icon'
      :color="realIconColor"
      data-test="icon"/>
    <slot />
    <bc-icon v-if="icon&&right"
      :name='icon'
      :color="realIconColor"
      data-test="icon"/>
  </button>
</template>

<script>
import prevent from "@/assets/js/prevent.js";
import BcIcon from "@/components/icon/src/icon.vue";

export default {
  components: { BcIcon },
  name: 'BcButton',
  props: {
    icon: String, //图标类型
    type: String, //颜色类型(成功，警告，错误)
    size: {
      type: String,
      default: 'normal'
    },
    disabled: Boolean,
    iconColor: String,  //图标颜色
    right: Boolean,
    // center: Boolean,
    shake: Number,  // 防抖的秒数
    throttle: Number, // 节流的秒数
    clickId: [String, Number] // 按钮的唯一标识
  },
  computed: {
    sizeType() {
      let sizeList = ['small', 'normal', 'big'];
      if(sizeList.includes(this.size)) return 'size-'+this.size;
      return 'size-normal'
    },
    realIconColor() {
      if (this.disabled) return '#bbb';
      else return this.iconColor;
    }
  },
  methods: {
    toClick() {
      let clickType, num;
      if (this.throttle) {
        clickType = 1;
        num = this.throttle;
      } else if (this.shake && this.shake > 0) {
        clickType = 2;
        num = this.shake;
      } else if (this.shake && this.shake < 0) {
        clickType = 3;
        num = this.shake * -1;
      }
      prevent(this.clickId, ()=>{this.$emit("click")}, num, clickType);
    }
  }
}
</script>

<style scoped>
.bc-button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  outline: 0;
  border: 1px solid #000;
  border-radius: 6px;
  color: #000;
  cursor: pointer;
  transition: all 0.1s;
}
.bc-button.bc-button--primary {
  color: #2d8cf0;
  border: 1px solid #2d8cf0;
}
.bc-button.bc-button--info {
  color: #2db7f5;
  border: 1px solid #2db7f5;
}
.bc-button.bc-button--success {
  color: #19be6b;
  border: 1px solid #19be6b;
}
.bc-button.bc-button--warning {
  color: #f90;
  border: 1px solid #f90;
}
.bc-button.bc-button--error {
  color: #ed4014;
  border: 1px solid #ed4014;
}
.bc-button.is-disabled {
  color: #bbb;
  border: 1px solid #bbb;
  cursor: not-allowed;
}
.bc-button.size-normal {
  font-size: 15px;
  padding: 4px 8px;
}
.bc-button.size-small {
  font-size: 14px;
  padding: 2px 6px;
}
.bc-button.size-big {
  font-size: 16px;
  padding: 6px 11px;
}
.bc-button:not(.is-disabled):active {
  opacity: 0.7;
  transform: scale(0.9);
}
.bc-button:not(.is-disabled):hover {
  background-color:rgba(245,249,254,.5);
}
</style>